<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="../libs/jquery-3.5.1.min.js"></script>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      body {
         background-image: url(../img/loginBg.jpg);

      }

      .box {
         width: 600px;
         height: 600px;
         border: none;
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto;
      }

      .box>img {
         width: 600px;
         height: 600px;
         border: none;
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto;
         z-index: -1;
         border-radius: 100px;
         opacity: .8;
      }

      h3 {
         text-align: center;
         line-height: 150px;
         font-size: 35px;
      }

      .form {
         width: 600px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
      }

      .form input {
         box-sizing: border-box;
         width: 300px;
         height: 40px;
         border: none;
         border-radius: 50px;
         color: #999999;
         margin-top: 40px;
         padding-left: 30px;
         outline: none;
      }

      .form p {
         position: absolute;
         left: 370px;
         top: 320px;

      }

      button {
         width: 250px;
         height: 35px;
         border: none;
         background: skyblue;
         border-radius: 30px;
         margin-top: 60px;
         font-size: 16px;
         color: white;
         cursor: pointer;
         margin-left: 175px;
      }

      a {
         text-decoration: none;
         color: black;
      }

      #checkOne {
         position: absolute;
         width: 20px;
         height: 20px;
         left: 170px;
         top: 400px;
      }

      #checkTwo {
         position: absolute;
         width: 20px;
         height: 20px;
         left: 290px;
         top: 400px;
      }

      span:nth-of-type(1) {
         position: absolute;
         color: red;
         left: 195px;
         top: 438px;
      }

      span:nth-of-type(2) {
         position: absolute;
         color: red;
         left: 320px;
         top: 438px;
      }
   </style>
</head>

<body>
   <div class="box">
      <img src="../img/timg.gif" alt="">
      <h3>欢迎登陆</h3>
      <div class="form">
         <input type="text" name="" id="name" placeholder="请输入用户名">
         <input type="password" id="pwd" placeholder="请输入密码">
         <input type="checkbox" id="checkOne"><span>七天免登录</span>
         <input type="checkbox" id="checkTwo"><span>记住密码</span>
         <p><a href="./register.html">立即注册</a></p>
      </div>
      <button id='login'>登录</button>

   </div>

   <script src="../utils.js"></script>
   <script src="../js/login.js"></script>
</body>

</html>